<template>
  <a-card :bordered="false" class="withdrawal">
    <div class="theknightSearch table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="getList">
        <a-row :gutter="24">
          <a-col :md="5" :sm="5">
            <a-form-item label="手机号" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入手机号" v-model="queryParam.loginName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="5">
            <a-form-item label="类型" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-select default-value="请选择" style="width: 120px" @change="handleChange">
                <a-select-option value="1" key="1">
                  普通用户
                </a-select-option>
                <a-select-option value="2" key="2">
                  服务商
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6">
            <a-button type="primary" @click="getList" icon="search">搜索</a-button>
            <a-button style="margin-left: 8px" @click="refresh">刷新</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <section class="table">
      <a-table ref="table" size="middle" bordered rowKey="objectSid" :columns="columns" :pagination="ipagination"
        @change="changePage" :dataSource="List" :loading="loading">
        <template slot="avatar" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无头像</span>
          <img v-else :src="text" height="60px" alt="" style="max-width:100px;font-size: 12px;font-style: italic;" />
        </template>
        <span slot="action" slot-scope="record">
          <a @click="details(record)">查看详情</a>
          <a-divider type="vertical" />
          <a @click="change(record)">修改分成比例</a>
        </span>
      </a-table>
    </section>
    <a-modal v-model="showDetails" title="服务详情" @ok="showDetails=false">
      <a-form-model :labelCol="{span: 4}" :wrapperCol="{span: 14, offset: 1}">
        <a-form-model-item label="昵称">
          <label>{{chooseOrder.nickName}}</label>
        </a-form-model-item>
        <a-form-model-item label="头像">
          <label><img :src="chooseOrder.avatar" alt=""></label>
        </a-form-model-item>
        <a-form-model-item label="手机号">
          <label>{{chooseOrder.mobile}}</label>
        </a-form-model-item>
        <a-form-model-item label="类型">
          <label v-if="chooseOrder==1">普通用户</label>
          <label v-else>服务商</label>
        </a-form-model-item>
        <a-form-model-item label="性别">
          <label v-if="chooseOrder.sex==1">男</label>
          <label v-else>女</label>
        </a-form-model-item>
        <a-form-model-item label="生日">
          <label>{{chooseOrder.birthday}}</label>
        </a-form-model-item>
        <a-form-model-item label="剩余次数">
          <label>{{chooseOrder.quantity}}</label>
        </a-form-model-item>
        <a-form-model-item label="注册日期">
          <label>{{chooseOrder.created}}</label>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 修改分成比例弹窗 -->
    <a-modal title="修改分成比例" :visible="showChange" :footer="false" width="40%" :closable="true" @cancel="onClose">
      <section class="add-box">
        <a-form-model :label-col="labelCol" :model="newAgent" ref="changeForm" :wrapper-col="wrapperCol"
          :rules="changeRules">
          <a-form-model-item label="分成比例" :required="true" prop="memberPtc">
            <a-input-number v-model="newAgent.memberPtc" placeholder="请输入分成比例" style="width:50%"  @blur="changeNum"/>
            <label style="margin-left:10px;">注：请输入5的备注</label>
          </a-form-model-item>
        </a-form-model>
        <section class="btn-group">
          <a-button type="primary" :loading="saveLoading" @click="changeOk">保存</a-button>
          <a-button @click="onClose">取消</a-button>
        </section>
      </section>
    </a-modal>
  </a-card>
</template>
<script>
  import {
    postAction,
    getAction
  } from '@/api/manage'
  import store from '@/store'
  export default {
    data() {
      return {
        showChange: false,
        loading: false,
        showDetails: false,
        queryParam: {
          pageNo: 1,
          pageSize: 10,
          loginName: ""
        },
        saveLoading: false,
        changeRules: {
          memberPtc: [{
            required: true,
            message: '请输入分成比例！',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur']
          }],
        },
        newAgent: '',
        List: [],
        chooseOrder: {
          imageUrl: ''
        }, // 选中的数据
        assignRequest: "", //订单指派请求参数
        isBranchFlag: false, // 当前登录用户是否分站用户
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 6
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },
        columns: [{
            title: '昵称',
            align: "center",
            dataIndex: 'nickName',
          },
          {
            title: '手机号',
            align: "center",
            dataIndex: 'mobile',
          },
          {
            title: '头像',
            align: "center",
            dataIndex: 'avatar',
            scopedSlots: {
              customRender: 'avatar'
            }
          },
          {
            title: '类型',
            align: "center",
            dataIndex: 'type',
            customRender: (value, row, index) => {
              let obj;
              if (value == 1) {
                obj = '普通用户'
              } else if (value == 2) {
                obj = '服务商'
              }
              return obj;
            }
          },
          {
            title: '剩余次数',
            align: "center",
            dataIndex: 'quantity',
          },
          {
            title: '分成比例（%）',
            align: "center",
            dataIndex: 'memberPtc',
          },
          {
            title: '注册日期',
            align: "center",
            dataIndex: 'created',
          }, {
            title: '操作',
            dataIndex: '',
            key: 'x',
            scopedSlots: {
              customRender: 'action'
            }
          },
        ],
        //标记页数；页码
        ipagination: {
          current: 1,
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          total: 0
        },

        url: {
          list: "/member/list",
          edit: '/member/edit'
        }
      }
    },
    created() {
      console.log(this.$store.state.user.info.branchId, "获取当前登录用户的分站");
      const ut = store.getters.userInfo.userType;
      this.isBranchFlag = (ut == 2 || ut == 3) ? true : false;
      if (this.isBranchFlag) {
        this.queryParam.branchId = store.getters.userInfo.branchId;
      }
      this.getList()
    },
    methods: {
      changeNum(){
        let num=Math.floor(this.newAgent.memberPtc/5);
        this.newAgent.memberPtc=num*5;
      },
      // 查看详情
      details(e) {
        this.chooseOrder = e
        this.showDetails = true
      },
      getList() {
        this.loading = true;
        getAction(this.url.list, this.queryParam).then((res) => {
          console.log(res);
          this.loading = false;
          if (res.success) {
            this.List = res.result.records;
            this.ipagination.total = res.result.total;
          }
        })
      },
      // 修改分成比例
      change(e) {
        this.newAgent = e;
        this.showChange = true;
      },
      changeOk() {
        this.$refs.changeForm.validate(valid => {
          if (valid) {
            this.saveLoading = true;
            postAction(this.url.edit,{
              memberPtc:this.newAgent.memberPtc,
              objectSid:this.newAgent.objectSid
            }).then(res => {
              console.log(res);
              this.saveLoading = false;
              if (res.success) {
                this.$message.success(res.message);
                this.showChange = false;
                this.getList();
              } else {
                this.$message.error(res.message)
              }
            })
          }
        })
      },
      onClose() {
        this.showChange = false;
      },
      // 代理列表改变分页
      changePage(pagination) {
        console.log(pagination);
        this.ipagination.current = pagination.current
        this.queryParam.pageNo = pagination.current;
        this.queryParam.pageSize = pagination.pageSize;
        this.getList();
      },
      // 选择用户类型
      handleChange(e) {
        this.queryParam.type = e;
      },
      // 刷新
      refresh() {

      },
    }
  }
</script>
<style lang="less" scoped>
  .modal {
    .modeal-title {
      text-align: center;
      font-size: 20px;
      font-weight: 700;
    }

    button {
      position: absolute;
      right: 50px;
    }

    .pooltable {
      padding-top: 50px;
    }
  }

  .withdrawal {
    .time {
      margin-top: 30px;
    }

    .theknightSearch {
      padding: 15px 10px;

      .ant-form-item {
        width: 100%;
      }
    }

    .btn-group {
      display: flex;
      justify-content: center;
    }

  }

  .btn-group button {
    margin-right: 10px;
  }

  .table-page-search-wrapper .ant-form-inline .ant-form-item {
    margin-bottom: 0px !important;
  }
</style>